﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Template.aspx.cs" Inherits="TimesheetDSI.WebApp.Domaines" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Domaines Timesheet DSI</title>
    <link href="Styles/jQuery-UI/vp/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/qTip2/qTip2-2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jqGrid/jqGrid-4.6.0/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="Styles/vpGrid/vpGrid-0.7.7.css" rel="stylesheet" type="text/css" />

    <!-- jQuery -->
    <script src="Scripts/jQuery/jquery-1.11.0.min.js" type="text/javascript"></script>

    <!--jQuery-UI-->
    <script src="Scripts/jQuery-UI/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jQuery-UI/i18n/jquery.ui.datepicker-fr.js" type="text/javascript"></script>

    <!-- qTip2-->
    <script src="Scripts/qTip2/qTip2-2.2.0/jquery.qtip.min.js" type="text/javascript"></script>

    <!--jqGrid-->
    <script src="Scripts/jqGrid/jqGrid-4.6.0/i18n/grid.locale-fr.js" type="text/javascript"></script>
    <script src="Scripts/jqGrid/jqGrid-4.6.0/jquery.jqGrid.src.js" type="text/javascript"></script>

    <!--vpGrid-->
    <script src="Scripts/vpGrid/vpGrid-0.7.7.js" type="text/javascript"></script>

    <!-- this Grid -->
    <script src="Scripts/TimesheetDSI/Domaines/TimesheetDSI.Domaines-0.0.1.js" type="text/javascript"></script>


</head>
<body>
    <form id="form1" runat="server">
   
    <!-- vpGrid Begin-->
    <div role="vp-grid-container" class="vp-grid-container">
        <!-- vpGrid quick launch -->
        <div role="vp-grid-quick-launch" class="vp-grid-quick-launch">
            &nbsp;
        </div>
        <!-- End vpGrid quick launch -->

        <!--  Grid Title-->
        <h1 class="vp-grid-title">Domaines</h1>

        <!-- Grid body : jqgrid-->
        <div role="vp-grid-body">
            <!-- Schema definition of the grid-->
            <table role="vp-grid-schema">
                
                <thead>

                <!-- columns definition -->
                <tr role="vp-grid-schema-columns" class="ui-widget-header">
                    <th class="center"
                            data-vp-grid-column-name="remoteId"
                            data-vp-grid-column-type="key"
                            data-vp-grid-column-width="1"
                            data-vp-grid-column-hidden="true"
                            data-vp-grid-column-editable="false">Remote ID</th>
                </tr>
                <!-- end columns definition -->
                </thead>

                <!-- status bar definition -->
                <tfoot>
                    <tr class="ui-widget-header" colspan="1000">
                        <!-- this status bar has only one cell -->
                        <td>
                            <div class="vp-grid-status-group">
                                    Items :
                                    <span data-vp-grid-ui-content-placeholder="true"
                                          data-vp-grid-ui-id="vpGrid.filteredItemCount"
                                          data-vp-grid-datasource="vpGrid.filteredItemCount"
                                          data-vp-grid-datasource-type="handler"
                                          data-vp-grid-timeline-sequence="GridLoaded"
                                          >
                                    </span>
                                    /
                                    <span data-vp-grid-ui-content-placeholder="true"
                                          data-vp-grid-ui-id="vpGrid.totalItemCount"
                                          data-vp-grid-datasource="vpGrid.totalItemCount"
                                          data-vp-grid-datasource-type="handler"
                                          data-vp-grid-timeline-sequence="GridLoaded">
                                    </span>

                                </div>
                        </td>
                    </tr>
                </tfoot>    
                <!-- end status bar definition -->


            </table>
            <!-- End Schema definition of the grid-->

        </div>
        <!-- end Grid body : jqgrid-->



        <!-- Partial layouts-->
        <div role="vp-grid-partial-ui"
             data-vp-grid-ui-id ="vpGridEmptyOnDataLoad" 
             style="padding-top:20px;padding-left:20px;" class="vp-grid-hidden">
            <p>
                No data has been received from server. Please check that Url is correct and server is up and running.
            </p>
        </div>

        <div role="vp-grid-partial-ui"
             data-vp-grid-ui-id="vpGridEmptyOnGridComplete"
             style="padding-top:20px;padding-left:20px;" class="vp-grid-hidden">
            <p>
                No data has been found for your search. Either change the filter value or reset at least one filter.
            </p>
        </div>

        <div role="vp-grid-partial-ui"
             data-vp-grid-ui-id="vpGridSettingsButton"
             class="vp-grid-settings-button vp-grid-hidden">
            <span></span>
            <span class="second"></span>
            <span class="third"></span>
        </div>
        <!-- End Partial layouts-->

        <!-- common modal dialog windows-->
        <div role="vp-grid-modal-dialog"
             title="Communication avec VPLink..."
             class="vp-grid-hidden vp-grid-container vp-grid-modal-dialog"
             data-vp-grid-dialog-id="vpGridLoading"
             data-vp-grid-ui-widget="dialog"
             data-vp-grid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vp-grid-timeline-sequence="GridLoading">

            <span class="ui-icon  ui-icon-clock" style="float: left; margin: 3px 7px 40px 0;"></span>
            Merci de patienter pendant le chargement des donn&#233es.
        </div>


        <div role="vp-grid-modal-dialog"
             title="Suppression d'un item"
             class="vp-grid-hidden vp-grid-container vp-grid-modal-dialog"
             data-vp-grid-dialog-id="vpGridDeleteItem"
             data-vp-grid-ui-widget="dialog"
             data-vp-grid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vp-grid-timeline-sequence="GridLoaded">

            <span class="ui-icon  ui-icon-alert" style="float:left; margin:3px 7px 40px 0;">

            </span>
            <span>Etes vous sûr de vouloir supprimer l'élément sélectionné?</span>
            
            <hr />
            <div class="vp-row  vp-modal-dialog-bottom-buttons">
                <div class="span12">

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-trash"
                            data-vp-grid-ui-widget="button"
                            data-vp-grid-ui-widget-options='{"icons": {"primary": "ui-icon-trash"}}'
                            data-vp-grid-timeline-sequence="GridLoaded"
                            data-vp-grid-handlers='{"click" : { "handler" : "vpGrid.deleteCurrentRow", "async" : true}}'>
                        Supprimer
                    </button>

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                            data-vp-grid-ui-widget="button"
                            data-vp-grid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                            data-vp-grid-timeline-sequence="GridLoaded"
                            data-vp-grid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                        Annuler
                    </button>




                </div>
            </div>

        </div>
        <!-- End vpGridDeleteItem modal dialog -->

        <!-- End common modal dialog windows-->


    </div> 
    <!-- vpGrid End-->

    <!-- script de chargement de la grille et initialisation de ce Timesheet -->
    <script type="text/javascript" >
        $(function () {
            //initialisation du framework vpGrid et jqGrid
            vpGrid.init(
                {
                    defaultCaption: "",
                    enableFilterToolbar: true,
                    enableOperatorsInFilterToolbar: false,
                    enableCustomCaption: false,
                    enableCustomStatusBar: true,
                    enableRowCheckbox: true,
                    enableSummaryRows: false,
                    placeSummaryRowsOnTop: false,
                    numberOfSummaryRows: 2,
                    numberOfVisibleRows: 11,
                    autoInsertNewLineAtBottom: false,

                    datepickerOptions: {
                        dateFormat: 'dd/mm/yy',
                        showOtherMonths: true,
                        selectOtherMonths: true,
                        constrainInput: true
                    },
                    crudOptions: {
                        read: "Layouts/Domaines/GetData1.aspx"
                    },
                    jqGridOptions: {
                        jgrid: {
                            formatter: {
                                integer: { thousandsSeparator: " ", defaultValue: '0' },
                                number: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' },
                                //number: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00' },
                                currency: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix: " €", defaultValue: '0' },
                                date: { srcformat: 'd/m/Y', newformat: 'd/m/Y' },
                                checkbox: { disabled: false }
                            }
                        }
                    }

                });
                // End Grid initialisation

                // initialisation de cette grille
                VP.Timesheet.init();

        });



        </script>
    <!-- End script de chargement de la grille et initialisation de ce Timesheet -->
   
    </form>
</body>
</html>
